<!DOCTYPE html>
<html>
  <head>
    <title>彻底掌握前后端通信中的“同源/跨域”解决方案</title>
    <meta charset="utf-8" />
    <link
      href="https://cdn.maxiang.io/res-min/themes/marxico.css"
      rel="stylesheet"
    />
    <style>
      .note-content {
        font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti,
          "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="preview-contents" class="note-content">
      <h3 id="彻底掌握前后端通信中的同源跨域解决方案">
        彻底掌握前后端通信中的“同源/跨域”解决方案
      </h3>

      <h4 id="前端开发的历史车轮通信篇">前端开发的历史车轮（通信篇）</h4>

      <p>
        阶段1：服务器渲染 <br />
        阶段2：客户端渲染（同源策略） <br />
        阶段3：客户端渲染（跨域方案） <br />
        阶段4：半服务器渲染 SSR
      </p>

      <p><strong>面试题1：你认为AJAX的意义是啥</strong></p>

      <p><strong>面试题2：ajax、$.ajax、axios、fetch对比</strong></p>

      <ul>
        <li><p>ajax的核心操作</p></li>
        <li><p>$.ajax的封装</p></li>
        <li><p>axios的封装</p></li>
        <li><p>axios的二次配置</p></li>
        <li><p>fetch的处理和封装</p></li>
      </ul>

      <p>【JQ版ajax库】</p>

      <pre
        class="prettyprint hljs-dark"
      ><code class="language-javascript hljs"><div class="hljs-line">~ <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ajax</span>(<span class="hljs-params">options</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> init(options);
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">/* ==AJAX处理的核心== */</span>
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> regGET = <span class="hljs-regexp">/^(GET|DELETE|HEAD|OPTIONS)$/i</span>;
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> defaults = {
</div><div class="hljs-line">        <span class="hljs-attr">url</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">//=&gt;请求的API接口地址</span>
</div><div class="hljs-line">        method: <span class="hljs-string">'GET'</span>, <span class="hljs-comment">//=&gt;请求方式</span>
</div><div class="hljs-line">        data: <span class="hljs-literal">null</span>, <span class="hljs-comment">//=&gt;传递给服务器的信息：支持格式STRING和OBJECT，如果是OBJECT，我们需要把其处理为x-www-form-urlencoded格式；GET请求是把信息作为问号参数传递给服务器，POST请求是放到请求主体中传递给服务器；</span>
</div><div class="hljs-line">        dataType: <span class="hljs-string">'JSON'</span>, <span class="hljs-comment">//=&gt;处理返回结果 JSON/TEXT/XML</span>
</div><div class="hljs-line">        <span class="hljs-keyword">async</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">//=&gt;是否异步请求</span>
</div><div class="hljs-line">        cache: <span class="hljs-literal">true</span>, <span class="hljs-comment">//=&gt;清除GET请求缓存</span>
</div><div class="hljs-line">        timeout: <span class="hljs-literal">null</span>, <span class="hljs-comment">//=&gt;超时时间</span>
</div><div class="hljs-line">        headers: <span class="hljs-literal">null</span>, <span class="hljs-comment">//=&gt;设置请求头信息</span>
</div><div class="hljs-line">        success: <span class="hljs-literal">null</span>, <span class="hljs-comment">//=&gt;从服务器获取成功后执行</span>
</div><div class="hljs-line">        error: <span class="hljs-literal">null</span> <span class="hljs-comment">//=&gt;获取失败后执行</span>
</div><div class="hljs-line">    };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">init</span>(<span class="hljs-params">options = {}</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;参数初始化：把传递的配置项替换默认的配置项</span>
</div><div class="hljs-line">        <span class="hljs-keyword">this</span>.options = <span class="hljs-built_in">Object</span>.assign(defaults, options);
</div><div class="hljs-line">        <span class="hljs-keyword">this</span>.xhr = <span class="hljs-literal">null</span>;
</div><div class="hljs-line">        <span class="hljs-keyword">this</span>.send();
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    ajax.prototype = {
</div><div class="hljs-line">        <span class="hljs-attr">constructor</span>: ajax,
</div><div class="hljs-line">        <span class="hljs-attr">version</span>: <span class="hljs-number">1.0</span>,
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;发送AJAX请求</span>
</div><div class="hljs-line">        send() {
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> xhr = <span class="hljs-literal">null</span>,
</div><div class="hljs-line">                {
</div><div class="hljs-line">                    url,
</div><div class="hljs-line">                    method,
</div><div class="hljs-line">                    <span class="hljs-keyword">async</span>,
</div><div class="hljs-line">                    data,
</div><div class="hljs-line">                    cache,
</div><div class="hljs-line">                    timeout,
</div><div class="hljs-line">                    dataType,
</div><div class="hljs-line">                    headers,
</div><div class="hljs-line">                    success,
</div><div class="hljs-line">                    error
</div><div class="hljs-line">                } = <span class="hljs-keyword">this</span>.options;
</div><div class="hljs-line">            <span class="hljs-keyword">this</span>.xhr = xhr = <span class="hljs-keyword">new</span> XMLHttpRequest;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;如果是GET请求把处理后的DATA放在URL末尾传递给服务器</span>
</div><div class="hljs-line">            data = <span class="hljs-keyword">this</span>.handleData();
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (data !== <span class="hljs-literal">null</span> &amp;&amp; regGET.test(method)) {
</div><div class="hljs-line">                url += <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.checkASK(url)}</span><span class="hljs-subst">${data}</span>`</span>;
</div><div class="hljs-line">                data = <span class="hljs-literal">null</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;处理CACHE:如果是GET并且CACHE是FALSE需要清除缓存</span>
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (cache === <span class="hljs-literal">false</span> &amp;&amp; regGET.test(method)) {
</div><div class="hljs-line">                url+=<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.checkASK(url)}</span>_=<span class="hljs-subst">${<span class="hljs-built_in">Math</span>.random()}</span>`</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            xhr.open(method, url, <span class="hljs-keyword">async</span>);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;超时处理</span>
</div><div class="hljs-line">            timeout !== <span class="hljs-literal">null</span> ? xhr.timeout = timeout : <span class="hljs-literal">null</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;设置请求头信息</span>
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-built_in">Object</span>.prototype.toString.call(headers) === <span class="hljs-string">"[object Object]"</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> headers) {
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span> (!headers.hasOwnProperty(key)) <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                    xhr.setRequestHeader(key, <span class="hljs-built_in">encodeURIComponent</span>(headers[key]));
</div><div class="hljs-line">                }
</div><div class="hljs-line">            }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
</div><div class="hljs-line">                <span class="hljs-keyword">let</span> {
</div><div class="hljs-line">                    status,
</div><div class="hljs-line">                    statusText,
</div><div class="hljs-line">                    <span class="hljs-attr">readyState</span>: state,
</div><div class="hljs-line">                    responseText,
</div><div class="hljs-line">                    responseXML
</div><div class="hljs-line">                } = xhr;
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/^(2|3)\d{2}$/</span>.test(status)) {
</div><div class="hljs-line">                    <span class="hljs-comment">//=&gt;成功</span>
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span> (state === <span class="hljs-number">4</span>) {
</div><div class="hljs-line">                        <span class="hljs-keyword">switch</span> (dataType.toUpperCase()) {
</div><div class="hljs-line">                            <span class="hljs-keyword">case</span> <span class="hljs-string">'JSON'</span>:
</div><div class="hljs-line">                                responseText = <span class="hljs-built_in">JSON</span>.parse(responseText);
</div><div class="hljs-line">                                <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                            <span class="hljs-keyword">case</span> <span class="hljs-string">'XML'</span>:
</div><div class="hljs-line">                                responseText = responseXML;
</div><div class="hljs-line">                                <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                        }
</div><div class="hljs-line">                        success &amp;&amp; success(responseText, statusText, xhr);
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                    <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">                }
</div><div class="hljs-line">                <span class="hljs-comment">//=&gt;失败的</span>
</div><div class="hljs-line">                <span class="hljs-keyword">typeof</span> error === <span class="hljs-string">"function"</span> ? error(statusText, xhr) : <span class="hljs-literal">null</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            xhr.send(data);
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;关于DATA参数的处理</span>
</div><div class="hljs-line">        handleData() {
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> {
</div><div class="hljs-line">                data
</div><div class="hljs-line">            } = <span class="hljs-keyword">this</span>.options;
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (data === <span class="hljs-literal">null</span> || <span class="hljs-keyword">typeof</span> data === <span class="hljs-string">"string"</span>) <span class="hljs-keyword">return</span> data;
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> str = <span class="hljs-string">``</span>;
</div><div class="hljs-line">            <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> data) {
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (!data.hasOwnProperty(key)) <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                str += <span class="hljs-string">`<span class="hljs-subst">${key}</span>=<span class="hljs-subst">${data[key]}</span>&amp;`</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            str = str.substring(<span class="hljs-number">0</span>, str.length - <span class="hljs-number">1</span>);
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> str;
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;检测URL中是否存在问号</span>
</div><div class="hljs-line">        checkASK(url) {
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> url.indexOf(<span class="hljs-string">'?'</span>) === <span class="hljs-number">-1</span> ? <span class="hljs-string">'?'</span> : <span class="hljs-string">'&amp;'</span>;
</div><div class="hljs-line">        }
</div><div class="hljs-line">    };
</div><div class="hljs-line">    init.prototype = ajax.prototype;
</div><div class="hljs-line">    <span class="hljs-built_in">window</span>._ajax = ajax;
</div><div class="hljs-line">}();
</div></code></pre>

      <p>【axios的封装】</p>

      <pre
        class="prettyprint hljs-dark"
      ><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/* </span>
</div><div class="hljs-line"><span class="hljs-comment"> * 基于PROMISE封装自己的AJAX库 【v1.0.0】</span>
</div><div class="hljs-line"><span class="hljs-comment"> */</span>
</div><div class="hljs-line">(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">anonymous</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> isObj = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isObj</span>(<span class="hljs-params">val</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> val !== <span class="hljs-literal">null</span> &amp;&amp; <span class="hljs-keyword">typeof</span> val === <span class="hljs-string">"object"</span>;
</div><div class="hljs-line">    };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> char = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">char</span>(<span class="hljs-params">url</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> url.includes(<span class="hljs-string">'?'</span>) ? <span class="hljs-string">'&amp;'</span> : <span class="hljs-string">'?'</span>;
</div><div class="hljs-line">    };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">/* ===AJAX核心处理=== */</span>
</div><div class="hljs-line">    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyAJAX</span> </span>{
</div><div class="hljs-line">        <span class="hljs-keyword">constructor</span>(options = {}) {
</div><div class="hljs-line">            <span class="hljs-keyword">this</span>.config = options;
</div><div class="hljs-line">            <span class="hljs-keyword">this</span>.ISGET = <span class="hljs-regexp">/^(GET|DELETE|HEAD|OPTIONS)$/i</span>.test(options.method);
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.init();
</div><div class="hljs-line">        }
</div><div class="hljs-line">        init() {
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> transformRequest = <span class="hljs-keyword">this</span>.config.transformRequest;
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> transformRequest === <span class="hljs-string">"function"</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.config = transformRequest(<span class="hljs-keyword">this</span>.config);
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-comment">// 按照最新的CONFIG处理即可</span>
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> {
</div><div class="hljs-line">                method,
</div><div class="hljs-line">                validateStatus,
</div><div class="hljs-line">                transformResponse,
</div><div class="hljs-line">                withCredentials
</div><div class="hljs-line">            } = <span class="hljs-keyword">this</span>.config;
</div><div class="hljs-line">            !<span class="hljs-built_in">Array</span>.isArray(transformResponse) ? transformResponse = [<span class="hljs-literal">null</span>, <span class="hljs-literal">null</span>] : <span class="hljs-literal">null</span>;
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {
</div><div class="hljs-line">                <span class="hljs-comment">// 发送AJAX请求</span>
</div><div class="hljs-line">                <span class="hljs-keyword">let</span> xhr = <span class="hljs-keyword">new</span> XMLHttpRequest;
</div><div class="hljs-line">                xhr.open(method, <span class="hljs-keyword">this</span>.handleURL());
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.handleHeaders(xhr);
</div><div class="hljs-line">                xhr.withCredentials = withCredentials;
</div><div class="hljs-line">                xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span> (xhr.readyState === <span class="hljs-number">2</span>) {
</div><div class="hljs-line">                        <span class="hljs-keyword">let</span> flag = validateStatus(xhr.status);
</div><div class="hljs-line">                        <span class="hljs-keyword">if</span> (!flag) {
</div><div class="hljs-line">                            reject(<span class="hljs-keyword">this</span>.handleResult(xhr, <span class="hljs-literal">false</span>));
</div><div class="hljs-line">                            <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">                        }
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span> (xhr.readyState === <span class="hljs-number">4</span>) {
</div><div class="hljs-line">                        resolve(<span class="hljs-keyword">this</span>.handleResult(xhr, <span class="hljs-literal">true</span>));
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                };
</div><div class="hljs-line">                xhr.send(<span class="hljs-keyword">this</span>.handleData());
</div><div class="hljs-line">            }).then(...transformResponse);
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-comment">// URL处理:CACHE/PARAMS</span>
</div><div class="hljs-line">        handleURL() {
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> {
</div><div class="hljs-line">                url,
</div><div class="hljs-line">                baseURL,
</div><div class="hljs-line">                cache,
</div><div class="hljs-line">                params
</div><div class="hljs-line">            } = <span class="hljs-keyword">this</span>.config;
</div><div class="hljs-line">            url = baseURL + url;
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.ISGET) {
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (isObj(params)) {
</div><div class="hljs-line">                    <span class="hljs-keyword">let</span> paramsText = <span class="hljs-string">``</span>;
</div><div class="hljs-line">                    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> params) {
</div><div class="hljs-line">                        <span class="hljs-keyword">if</span> (!params.hasOwnProperty(key)) <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                        paramsText += <span class="hljs-string">`&amp;<span class="hljs-subst">${key}</span>=<span class="hljs-subst">${params[key]}</span>`</span>;
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                    paramsText = paramsText.substring(<span class="hljs-number">1</span>);
</div><div class="hljs-line">                    url += char(url) + paramsText;
</div><div class="hljs-line">                }
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (cache === <span class="hljs-literal">false</span>) {
</div><div class="hljs-line">                    url += <span class="hljs-string">`<span class="hljs-subst">${char(url)}</span>_=<span class="hljs-subst">${<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime()}</span>`</span>;
</div><div class="hljs-line">                }
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> url;
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-comment">// 设置请求头信息</span>
</div><div class="hljs-line">        handleHeaders(xhr) {
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> {
</div><div class="hljs-line">                headers
</div><div class="hljs-line">            } = <span class="hljs-keyword">this</span>.config;
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (isObj(headers)) {
</div><div class="hljs-line">                <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> headers) {
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span> (!headers.hasOwnProperty(key)) <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                    xhr.setRequestHeader(key, headers[key]);
</div><div class="hljs-line">                }
</div><div class="hljs-line">            }
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-comment">// 请求主体的值</span>
</div><div class="hljs-line">        handleData() {
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.ISGET) <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> data = <span class="hljs-keyword">this</span>.config.data;
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (isObj(data)) {
</div><div class="hljs-line">                data = <span class="hljs-built_in">JSON</span>.stringify(data);
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> data;
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-comment">// 获取返回的信息</span>
</div><div class="hljs-line">        handleResult(xhr, flag) {
</div><div class="hljs-line">            <span class="hljs-comment">// 获取响应头信息</span>
</div><div class="hljs-line">            <span class="hljs-keyword">let</span> headers = {};
</div><div class="hljs-line">            xhr.getAllResponseHeaders().split(<span class="hljs-regexp">/(?:\n|\r)/g</span>).filter(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.length &gt; <span class="hljs-number">0</span>).forEach(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
</div><div class="hljs-line">                <span class="hljs-keyword">let</span> [key, value = <span class="hljs-string">''</span>] = item.split(<span class="hljs-string">': '</span>);
</div><div class="hljs-line">                key ? headers[key] = value : <span class="hljs-literal">null</span>;
</div><div class="hljs-line">            });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (flag) {
</div><div class="hljs-line">                <span class="hljs-keyword">let</span> responseType = <span class="hljs-keyword">this</span>.config.responseType;
</div><div class="hljs-line">                <span class="hljs-keyword">let</span> data = xhr.responseText;
</div><div class="hljs-line">                <span class="hljs-keyword">switch</span> (responseType.toLowerCase()) {
</div><div class="hljs-line">                    <span class="hljs-keyword">case</span> <span class="hljs-string">'json'</span>:
</div><div class="hljs-line">                        data = <span class="hljs-built_in">JSON</span>.parse(data);
</div><div class="hljs-line">                        <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                    <span class="hljs-keyword">case</span> <span class="hljs-string">'xml'</span>:
</div><div class="hljs-line">                        data = xhr.responseXML;
</div><div class="hljs-line">                        <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                }
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">                    <span class="hljs-attr">status</span>: xhr.status,
</div><div class="hljs-line">                    <span class="hljs-attr">statusText</span>: xhr.statusText,
</div><div class="hljs-line">                    headers,
</div><div class="hljs-line">                    <span class="hljs-attr">request</span>: xhr,
</div><div class="hljs-line">                    <span class="hljs-attr">config</span>: <span class="hljs-keyword">this</span>.config,
</div><div class="hljs-line">                    data
</div><div class="hljs-line">                };
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">                <span class="hljs-attr">status</span>: xhr.status,
</div><div class="hljs-line">                <span class="hljs-attr">statusText</span>: xhr.statusText,
</div><div class="hljs-line">                headers,
</div><div class="hljs-line">                <span class="hljs-attr">request</span>: xhr,
</div><div class="hljs-line">                <span class="hljs-attr">config</span>: <span class="hljs-keyword">this</span>.config
</div><div class="hljs-line">            };
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">/* ===配置出_AJAX应有的接口并暴露到全局上=== */</span>
</div><div class="hljs-line">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">initParams</span>(<span class="hljs-params">options = {}</span>) </span>{
</div><div class="hljs-line">        !isObj(_ajax.defaults.headers) ? _ajax.defaults.headers = {} : <span class="hljs-literal">null</span>;
</div><div class="hljs-line">        !isObj(options.headers) ? options.headers = {} : <span class="hljs-literal">null</span>;
</div><div class="hljs-line">        options.headers = <span class="hljs-built_in">Object</span>.assign(_ajax.defaults.headers, options.headers);
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign(_ajax.defaults, options);
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">// _AJAX执行发送请求</span>
</div><div class="hljs-line">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">_ajax</span>(<span class="hljs-params">options = {}</span>) </span>{
</div><div class="hljs-line">        options = initParams(options);
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> MyAJAX(options);
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">// 默认的参数配置信息</span>
</div><div class="hljs-line">    _ajax.defaults = {
</div><div class="hljs-line">        <span class="hljs-attr">baseURL</span>: <span class="hljs-string">''</span>,
</div><div class="hljs-line">        <span class="hljs-attr">url</span>: <span class="hljs-string">''</span>,
</div><div class="hljs-line">        <span class="hljs-attr">method</span>: <span class="hljs-string">'get'</span>,
</div><div class="hljs-line">        <span class="hljs-attr">responseType</span>: <span class="hljs-string">'json'</span>,
</div><div class="hljs-line">        <span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">false</span>,
</div><div class="hljs-line">        <span class="hljs-attr">cache</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">        <span class="hljs-attr">params</span>: <span class="hljs-literal">null</span>,
</div><div class="hljs-line">        <span class="hljs-attr">data</span>: <span class="hljs-literal">null</span>,
</div><div class="hljs-line">        <span class="hljs-attr">headers</span>: {
</div><div class="hljs-line">            <span class="hljs-string">"Content-Type"</span>: <span class="hljs-string">"application/json"</span>
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-attr">transformRequest</span>: <span class="hljs-literal">null</span>,
</div><div class="hljs-line">        <span class="hljs-attr">transformResponse</span>: <span class="hljs-literal">null</span>,
</div><div class="hljs-line">        <span class="hljs-attr">validateStatus</span>: <span class="hljs-function"><span class="hljs-params">status</span> =&gt;</span> {
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> status &gt;= <span class="hljs-number">200</span> &amp;&amp; status &lt; <span class="hljs-number">300</span>;
</div><div class="hljs-line">        }
</div><div class="hljs-line">    };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">// _AJAX的快捷请求方法</span>
</div><div class="hljs-line">    [<span class="hljs-string">'get'</span>, <span class="hljs-string">'delete'</span>, <span class="hljs-string">'head'</span>, <span class="hljs-string">'options'</span>].forEach(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
</div><div class="hljs-line">        _ajax[item] = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">url, options = {}</span>) </span>{
</div><div class="hljs-line">            options.url = url;
</div><div class="hljs-line">            options.method = item;
</div><div class="hljs-line">            options = initParams(options);
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> MyAJAX(options);
</div><div class="hljs-line">        };
</div><div class="hljs-line">    });
</div><div class="hljs-line">    [<span class="hljs-string">'post'</span>, <span class="hljs-string">'put'</span>].forEach(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
</div><div class="hljs-line">        _ajax[item] = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">url, data = {}, options = {}</span>) </span>{
</div><div class="hljs-line">            options.url = url;
</div><div class="hljs-line">            options.method = item;
</div><div class="hljs-line">            options.data = data;
</div><div class="hljs-line">            options = initParams(options);
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> MyAJAX(options);
</div><div class="hljs-line">        };
</div><div class="hljs-line">    });
</div><div class="hljs-line">    _ajax.all = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">all</span>(<span class="hljs-params">promiseArr = []</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.all(promiseArr);
</div><div class="hljs-line">    };
</div><div class="hljs-line">    <span class="hljs-built_in">window</span>._ajax = _ajax;
</div><div class="hljs-line">})();
</div></code></pre>

      <p>【axios的二次配置】</p>

      <pre
        class="prettyprint hljs-dark"
      ><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> qs <span class="hljs-keyword">from</span> <span class="hljs-string">'qs'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/* </span>
</div><div class="hljs-line"><span class="hljs-comment"> * 根据环境变量进行接口区分</span>
</div><div class="hljs-line"><span class="hljs-comment"> */</span>
</div><div class="hljs-line"><span class="hljs-keyword">switch</span> (process.env.NODE_ENV) {
</div><div class="hljs-line">    <span class="hljs-keyword">case</span> <span class="hljs-string">"development"</span>:
</div><div class="hljs-line">        axios.defaults.baseURL = <span class="hljs-string">"http://127.0.0.1:9000"</span>;
</div><div class="hljs-line">        <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">    <span class="hljs-keyword">case</span> <span class="hljs-string">"test"</span>:
</div><div class="hljs-line">        axios.defaults.baseURL = <span class="hljs-string">"http://192.168.20.15:9000"</span>;
</div><div class="hljs-line">        <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">    <span class="hljs-keyword">case</span> <span class="hljs-string">"production"</span>:
</div><div class="hljs-line">        axios.defaults.baseURL = <span class="hljs-string">"http://api.zhufengpeixun.cn"</span>;
</div><div class="hljs-line">        <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment"> * 设置超时请求时间 </span>
</div><div class="hljs-line"><span class="hljs-comment"> */</span>
</div><div class="hljs-line">axios.defaults.timeout = <span class="hljs-number">10000</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment"> * 设置CORS跨域允许携带资源凭证  [krəˈdenʃlz] </span>
</div><div class="hljs-line"><span class="hljs-comment"> */</span>
</div><div class="hljs-line">axios.defaults.withCredentials = <span class="hljs-literal">true</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment"> * 设置POST请求头：告知服务器请求主体的数据格式</span>
</div><div class="hljs-line"><span class="hljs-comment"> */</span>
</div><div class="hljs-line">axios.defaults.headers[<span class="hljs-string">'Content-Type'</span>] = <span class="hljs-string">'application/x-www-form-urlencoded'</span>;
</div><div class="hljs-line">axios.defaults.transformRequest = <span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> qs.stringify(data);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment"> * 设置请求拦截器  [ˌɪntərˈsɛptərz]</span>
</div><div class="hljs-line"><span class="hljs-comment"> */</span>
</div><div class="hljs-line">axios.interceptors.request.use(<span class="hljs-function"><span class="hljs-params">config</span> =&gt;</span> {
</div><div class="hljs-line">    <span class="hljs-keyword">const</span> token = localStorage.getItem(<span class="hljs-string">'token'</span>);
</div><div class="hljs-line">    token &amp;&amp; (config.headers.Authorization = token);
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> config;
</div><div class="hljs-line">});
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment"> * 设置响应拦截器 </span>
</div><div class="hljs-line"><span class="hljs-comment"> */</span>
</div><div class="hljs-line">axios.defaults.validateStatus = <span class="hljs-function"><span class="hljs-params">status</span> =&gt;</span> {
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="hljs-regexp">/^(2|3)\d{2}$/</span>.test(status);
</div><div class="hljs-line">};
</div><div class="hljs-line">axios.interceptors.response.use(<span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> {
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> response.data;
</div><div class="hljs-line">}, error =&gt; {
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (error.response) {
</div><div class="hljs-line">        <span class="hljs-comment">// 请求已发送，只不过状态码不是200系列，设置不同状态码的不同处理</span>
</div><div class="hljs-line">        <span class="hljs-keyword">switch</span> (error.response.status) {
</div><div class="hljs-line">            <span class="hljs-keyword">case</span> <span class="hljs-number">401</span>: <span class="hljs-comment">// 当前请求需要用户验证（一般是未登录）</span>
</div><div class="hljs-line">                <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">            <span class="hljs-keyword">case</span> <span class="hljs-number">403</span>: <span class="hljs-comment">// 服务器拒绝执行（一般是TOKEN过期）</span>
</div><div class="hljs-line">                <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">            <span class="hljs-keyword">case</span> <span class="hljs-number">404</span>: <span class="hljs-comment">// 请求失败，请求地址错误</span>
</div><div class="hljs-line">                <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error.response);
</div><div class="hljs-line">    } <span class="hljs-keyword">else</span> {
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (!<span class="hljs-built_in">window</span>.navigator.onLine) {
</div><div class="hljs-line">            <span class="hljs-comment">// 断开网络了，可以让其跳转到断网页面</span>
</div><div class="hljs-line">            <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error);
</div><div class="hljs-line">    }
</div><div class="hljs-line">});
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> axios;
</div></code></pre>

      <p>【fetch的封装】</p>

      <pre
        class="prettyprint hljs-dark"
      ><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> qs <span class="hljs-keyword">from</span> <span class="hljs-string">'qs'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">let</span> baseURL = <span class="hljs-string">'http://api.zhufengpeixun.cn'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">request</span>(<span class="hljs-params">url, options = {}</span>) </span>{
</div><div class="hljs-line">    url = baseURL + url;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment">     * GET系列请求的处理 </span>
</div><div class="hljs-line"><span class="hljs-comment">     */</span>
</div><div class="hljs-line">    !options.method ? options.method = <span class="hljs-string">'GET'</span> : <span class="hljs-literal">null</span>;
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (options.hasOwnProperty(<span class="hljs-string">'params'</span>)) {
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/^(GET|DELETE|HEAD|OPTIONS)$/i</span>.test(options.method)) {
</div><div class="hljs-line">            <span class="hljs-keyword">const</span> ask = url.includes(<span class="hljs-string">'?'</span>) ? <span class="hljs-string">'&amp;'</span> : <span class="hljs-string">'?'</span>;
</div><div class="hljs-line">            url += <span class="hljs-string">`<span class="hljs-subst">${ask}</span><span class="hljs-subst">${qs.stringify(params)}</span>`</span>;
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-keyword">delete</span> options.params;
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment">     * 合并配置项 </span>
</div><div class="hljs-line"><span class="hljs-comment">     */</span>
</div><div class="hljs-line">    options = <span class="hljs-built_in">Object</span>.assign({
</div><div class="hljs-line">        <span class="hljs-comment">// 允许跨域携带资源凭证 same-origin同源可以  omit都拒绝</span>
</div><div class="hljs-line">        credentials: <span class="hljs-string">'include'</span>,
</div><div class="hljs-line">        <span class="hljs-comment">// 设置请求头</span>
</div><div class="hljs-line">        headers: {}
</div><div class="hljs-line">    }, options);
</div><div class="hljs-line">    options.headers.Accept = <span class="hljs-string">'application/json'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment">     * token的校验</span>
</div><div class="hljs-line"><span class="hljs-comment">     */</span>
</div><div class="hljs-line">    <span class="hljs-keyword">const</span> token = localStorage.getItem(<span class="hljs-string">'token'</span>);
</div><div class="hljs-line">    token &amp;&amp; (options.headers.Authorization = token);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment">     * POST请求的处理</span>
</div><div class="hljs-line"><span class="hljs-comment">     */</span>
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/^(POST|PUT)$/i</span>.test(options.method)) {
</div><div class="hljs-line">        !options.type ? options.type = <span class="hljs-string">'urlencoded'</span> : <span class="hljs-literal">null</span>;
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (options.type === <span class="hljs-string">'urlencoded'</span>) {
</div><div class="hljs-line">            options.headers[<span class="hljs-string">'Content-Type'</span>] = <span class="hljs-string">'application/x-www-form-urlencoded'</span>;
</div><div class="hljs-line">            options.body = qs.stringify(options.body);
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (options.type === <span class="hljs-string">'json'</span>) {
</div><div class="hljs-line">            options.headers[<span class="hljs-string">'Content-Type'</span>] = <span class="hljs-string">'application/json'</span>;
</div><div class="hljs-line">            options.body = <span class="hljs-built_in">JSON</span>.stringify(options.body);
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> fetch(url, options).then(<span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-comment">// 返回的结果可能是非200状态码</span>
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (!<span class="hljs-regexp">/^(2|3)\d{2}$/</span>.test(response.status)) {
</div><div class="hljs-line">            <span class="hljs-keyword">switch</span> (response.status) {
</div><div class="hljs-line">                <span class="hljs-keyword">case</span> <span class="hljs-number">401</span>:
</div><div class="hljs-line">                    <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                <span class="hljs-keyword">case</span> <span class="hljs-number">403</span>:
</div><div class="hljs-line">                    <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                <span class="hljs-keyword">case</span> <span class="hljs-number">404</span>:
</div><div class="hljs-line">                    <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(response);
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> response.json();
</div><div class="hljs-line">    }).catch(<span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (!<span class="hljs-built_in">window</span>.navigator.onLine) {
</div><div class="hljs-line">            <span class="hljs-comment">// 断开网络了，可以让其跳转到断网页面</span>
</div><div class="hljs-line">            <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">        }
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error);
</div><div class="hljs-line">    });
</div><div class="hljs-line">};
</div></code></pre>

      <p><strong>面试题3：聊聊你对跨域的理解</strong></p>

      <ul>
        <li>
          <p>跨域产生的原因和意义</p>

          <ul>
            <li><p>服务器分离：WEB服务器、数据服务器、图片服务器…</p></li>
            <li><p>云信息共享：第三方API接口</p></li>
            <li><p>有助于分离开发：开发跨域、部署同源</p></li>
          </ul>
        </li>
        <li><p>修改本地HOST</p></li>
        <li><p>JSONP</p></li>
        <li><p>CORS</p></li>
        <li><p>Proxy</p></li>
      </ul>

      <p>【JSONP】</p>

      <p>
        <img
          longdesc="./1590866771397.png"
          alt="Alt text"
          title=""
          type="image/png"
          src=""
          class=""
        />
      </p>

      <pre
        class="prettyprint hljs-dark"
      ><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// 服务器端代码</span>
</div><div class="hljs-line"><span class="hljs-keyword">let</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>),
</div><div class="hljs-line">    app = express();
</div><div class="hljs-line">app.listen(<span class="hljs-number">8001</span>, _ =&gt; {
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'OK!'</span>);
</div><div class="hljs-line">});
</div><div class="hljs-line">app.get(<span class="hljs-string">'/list'</span>, (req, res) =&gt; {
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> {
</div><div class="hljs-line">        callback = <span class="hljs-built_in">Function</span>.prototype
</div><div class="hljs-line">    } = req.query;
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> data = {
</div><div class="hljs-line">        <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
</div><div class="hljs-line">        <span class="hljs-attr">message</span>: <span class="hljs-string">'珠峰培训'</span>
</div><div class="hljs-line">    };
</div><div class="hljs-line">    res.send(<span class="hljs-string">`<span class="hljs-subst">${callback}</span>(<span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(data)}</span>)`</span>);
</div><div class="hljs-line">});
</div></code></pre>

      <p>【CORS】</p>

      <pre
        class="prettyprint hljs-dark"
      ><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-built_in">module</span>.exports = {
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;WEB服务端口号</span>
</div><div class="hljs-line">    PORT: <span class="hljs-number">3001</span>,
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;CROS跨域相关信息</span>
</div><div class="hljs-line">    CROS: {
</div><div class="hljs-line">        <span class="hljs-attr">ALLOW_ORIGIN</span>: <span class="hljs-string">'http://127.0.0.1:5500'</span>,
</div><div class="hljs-line">        <span class="hljs-attr">ALLOW_METHODS</span>: <span class="hljs-string">'PUT,POST,GET,DELETE,OPTIONS,HEAD'</span>,
</div><div class="hljs-line">        <span class="hljs-attr">HEADERS</span>: <span class="hljs-string">'Content-Type,Content-Length,Authorization, Accept,X-Requested-With'</span>,
</div><div class="hljs-line">        <span class="hljs-attr">CREDENTIALS</span>: <span class="hljs-literal">true</span>
</div><div class="hljs-line">    }
</div><div class="hljs-line">};
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">app.use(<span class="hljs-function">(<span class="hljs-params">req, res, next</span>) =&gt;</span> {
</div><div class="hljs-line">    <span class="hljs-keyword">const</span> {
</div><div class="hljs-line">        ALLOW_ORIGIN,
</div><div class="hljs-line">        CREDENTIALS,
</div><div class="hljs-line">        HEADERS,
</div><div class="hljs-line">        ALLOW_METHODS
</div><div class="hljs-line">    } = CONFIG.CROS;
</div><div class="hljs-line">    res.header(<span class="hljs-string">"Access-Control-Allow-Origin"</span>, ALLOW_ORIGIN);
</div><div class="hljs-line">    res.header(<span class="hljs-string">"Access-Control-Allow-Credentials"</span>, CREDENTIALS);
</div><div class="hljs-line">    res.header(<span class="hljs-string">"Access-Control-Allow-Headers"</span>, HEADERS);
</div><div class="hljs-line">    res.header(<span class="hljs-string">"Access-Control-Allow-Methods"</span>, ALLOW_METHODS);
</div><div class="hljs-line">    req.method === <span class="hljs-string">'OPTIONS'</span> ? res.send(<span class="hljs-string">'CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!'</span>) : next();
</div><div class="hljs-line">});
</div></code></pre>

      <p>【Proxy】</p>

      <pre
        class="prettyprint hljs-dark"
      ><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);
</div><div class="hljs-line"><span class="hljs-keyword">const</span> HtmlWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'html-webpack-plugin'</span>);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-built_in">module</span>.exports = {
</div><div class="hljs-line">    <span class="hljs-attr">mode</span>: <span class="hljs-string">'production'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">entry</span>: <span class="hljs-string">'./src/main.js'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">output</span>: {
</div><div class="hljs-line">        <span class="hljs-attr">filename</span>: <span class="hljs-string">'main.[hash].min.js'</span>,
</div><div class="hljs-line">        <span class="hljs-attr">path</span>: path.resolve(__dirname, <span class="hljs-string">'build'</span>)
</div><div class="hljs-line">    },
</div><div class="hljs-line">    <span class="hljs-attr">devServer</span>: {
</div><div class="hljs-line">        <span class="hljs-attr">port</span>: <span class="hljs-string">'3000'</span>,
</div><div class="hljs-line">        <span class="hljs-attr">compress</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">        <span class="hljs-attr">open</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">        <span class="hljs-attr">hot</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">        <span class="hljs-attr">proxy</span>: {
</div><div class="hljs-line">            <span class="hljs-string">'/'</span>: {
</div><div class="hljs-line">                <span class="hljs-attr">target</span>: <span class="hljs-string">'http://127.0.0.1:3001'</span>,
</div><div class="hljs-line">                <span class="hljs-attr">changeOrigin</span>: <span class="hljs-literal">true</span>
</div><div class="hljs-line">            }
</div><div class="hljs-line">        }
</div><div class="hljs-line">    },
</div><div class="hljs-line">    <span class="hljs-comment">// 配置WEBPACK的插件</span>
</div><div class="hljs-line">    plugins: [
</div><div class="hljs-line">        <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
</div><div class="hljs-line">            <span class="hljs-attr">template</span>: <span class="hljs-string">`./public/index.html`</span>,
</div><div class="hljs-line">            <span class="hljs-attr">filename</span>: <span class="hljs-string">`index.html`</span>
</div><div class="hljs-line">        })
</div><div class="hljs-line">    ]
</div><div class="hljs-line">};
</div></code></pre>

      <p>【nginx反向代理】</p>

      <p>
        <img
          longdesc="./1590867809596.png"
          alt="Alt text"
          title=""
          type="image/png"
          src=""
          class=""
        />
      </p>

      <hr />

      <p>【唠嗑或者咨询课程】</p>

      <p>
        <img
          longdesc="./1585816667198.png"
          alt="Alt text"
          title=""
          type="image/png"
          src=""
          class=""
        />
      </p>
    </div>
  </body>
</html>
